<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }

        .nav {
            width: 100%;
            display: flex;
            background-color: #f1f1f1;
            position: fixed;
            bottom: 0;
        }

        .nav div {
            height: 50px;
            line-height: 50px;
            text-align: center;
            flex: 1;
        }

        .active {
            background-color: red;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">

    class Home extends React.Component {

        render() {
            return <h1>首页</h1>
        }
    }
    class Cate extends React.Component {

        render() {
            return <h1>分类</h1>
        }
    }
    class Cart extends React.Component {

        render() {
            return <h1>购物车</h1>
        }
    }
    class Mine extends React.Component {

        render() {
            return <h1>我的</h1>
        }
    }
    class App extends React.Component {
        state = {
            // 定义当前选中索引的状态
            activeIndex: 0,
            navList: ["首页", "分类", "购物车", "我的"]
        }
        render() {
            let { activeIndex, navList } = this.state;
            return (
                <div>
                    {activeIndex === 0 && <Home/>}
                    {activeIndex === 1 && <Cate/>}
                    {activeIndex === 2 && <Cart/>}
                    {activeIndex === 3 && <Mine/>}
                    <div className='nav'>
                        {
                            navList.map((item, index) => {
                                return <div key={index} className={activeIndex === index ? 'active' : ''} onClick={() => this.chengeActive(index)}>{item}</div>
                            })
                        }
                    </div>
                </div>
            )
        }
        chengeActive(index) {
            this.setState({
                activeIndex: index
            })
        }
    }

    ReactDOM.render(<App />, document.getElementById("root"))

</script>

</html>